<script setup>
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
import { reactive } from 'vue'
import img1 from '../img/OIP-C.jpg'
import img2 from '../img/OIP-N.jpg'
import img3 from '../img/O1CN01t2Qa0L1Wh9Kc9Hogq_!!6000000002819-2-yinhe.avif'
import img4 from '../img/getAvatar.jpg'
import img5 from '../img/微信图片_20240414042233.png'
import img6 from '../img/微信图片_20240414042237.png'
import img7 from '../img/微信图片_20240414042239.png'
import img8 from '../img/微信图片_20240414042243.png'
import img9 from '../img/O1CN01YyA5md1vsTderYzYQ_!!6000000006228-2-tps-64-64.avif'
import img10 from '../img/O1CN01vPodKN28czFY6wOrh_!!6000000007954-2-tps-64-64.avif'
import img11 from '../img/O1CN01U5nfRV1kBv3s0a4g9_!!6000000004646-2-tps-64-64.avif'
import img12 from '../img/O1CN01gOLJD122XatIsFh0o_!!6000000007130-2-tps-64-64.avif'
import img13 from '../img/O1CN01WzYE8t1jYX0Dgp2OM_!!6000000004560-2-tps-64-64.avif'
import img14 from '../img/O1CN01GB2vZ01Zb96e14IyR_!!6000000003212-2-tps-64-64.avif'
import img15 from '../img/O1CN01tRAHSf1OQBrEJxTsS_!!6000000001699-2-tps-64-64.avif'
import img16 from '../img/O1CN01rbeEgw1m7upenVjKQ_!!6000000004908-2-tps-64-64.avif'
import img17 from '../img/143d9c7c7084039f.jpg.webp'
import img18 from '../img/微信图片_20240413222613.png'
import img19 from '../img/微信图片_20240413230354.png'
import img20 from '../img/微信图片_20240413230414.png'
import img21 from '../img/微信图片_20240413230416.png'
import img22 from '../img/微信图片_20240413230418.png'
import img23 from '../img/微信图片_20240413230419.png'
import img24 from '../img/微信图片_20240413230421.png'
import img25 from '../img/微信图片_20240413230424.png'
import img26 from '../img/微信图片_20240413230426.png'
import img27 from '../img/微信图片_20240413230427.png'
const logo = reactive([{ img: img1 }])
let data = [
  { l1: '分类' },
  { l1: '工业品', l2: '商业', l3: '定制', iii: img18 },
  { l1: '电脑', l2: '办公', l3: '文具', iii: img19 },
  { l1: '家电', l2: '手机', l3: '数码', iii: img20 },
  { l1: '家具', l2: '家装', l3: '家居', iii: img21 },
  { l1: '女装', l2: '男装', l3: '童装', iii: img22 },
  { l1: '食品', l2: '母婴', l3: '健康', iii: img23 },
  { l1: '汽车', l2: '运动', l3: '户外', iii: img24 },
  { l1: '女鞋', l2: '男鞋', l3: '箱包', iii: img25 },
  { l1: '美妆', l2: '洗护', l3: '珠宝', iii: img26 },
  { l1: '娱乐', l2: '图书', l3: '宠物', iii: img27 }
]

const photo = reactive([{ src: img2 }])
const tgc = reactive([{ gc: img3, gp: '多功能油刷烧烤刷2个装', go: '水性', gj: '¥4' }])

const dl = [{ dd: img4, da: '晚上好' }]
const aq = reactive([{ aa: '登录', as: '注册', ad: '开店' }])
const ba = reactive([
  { img00: img5, img00p: '宝贝收藏' },
  { img00: img6, img00p: '买过的店' },
  { img00: img7, img00p: '收藏的店' },
  { img00: img8, img00p: '我的足迹' }
])
const end = [
  { aa: img9, aap: '1688' },
  { aa: img10, aap: '裹裹商寄' },
  { aa: img11, aap: '书旗小说' },
  { aa: img12, aap: '一淘' },
  { aa: img13, aap: '飞猪旅行' },
  { aa: img14, aap: '大麦网' },
  { aa: img15, aap: '高德地图' },
  { aa: img16, aap: '优酷视频' }
]
const over = [
  {
    oo: img17,
    oop: 'ROG幻16 Air 酷睿Ultra 9 16英寸设计师游戏本笔记本电脑(U9-185H 32G 1T RTX4060 2.5K 240Hz)日蚀灰',
    w: false,
    oopp: '¥13999',
    num: '33人购买'
  },
  {
    oo: img17,
    oop: 'ROG幻16 Air 酷睿Ultra 9 16英寸设计师游戏本笔记本电脑(U9-185H 32G 1T RTX4060 2.5K 240Hz)日蚀灰',
    w: true,
    oopp: '¥13999',
    num: '33人购买'
  },
  {
    oo: img17,
    oop: 'ROG幻16 Air 酷睿Ultra 9 16英寸设计师游戏本笔记本电脑(U9-185H 32G 1T RTX4060 2.5K 240Hz)日蚀灰',
    w: false,
    oopp: '¥13999',
    num: '33人购买'
  },
  {
    oo: img17,
    oop: 'ROG幻16 Air 酷睿Ultra 9 16英寸设计师游戏本笔记本电脑(U9-185H 32G 1T RTX4060 2.5K 240Hz)日蚀灰',
    w: false,
    oopp: '¥13999',
    num: '33人购买'
  },
  {
    oo: img17,
    oop: 'ROG幻16 Air 酷睿Ultra 9 16英寸设计师游戏本笔记本电脑(U9-185H 32G 1T RTX4060 2.5K 240Hz)日蚀灰',
    w: true,
    oopp: '¥13999',
    num: '33人购买'
  },
  {
    oo: img17,
    oop: 'ROG幻16 Air 酷睿Ultra 9 16英寸设计师游戏本笔记本电脑(U9-185H 32G 1T RTX4060 2.5K 240Hz)日蚀灰',
    w: false,
    oopp: '¥13999',
    num: '33人购买'
  },
  {
    oo: img17,
    oop: 'ROG幻16 Air 酷睿Ultra 9 16英寸设计师游戏本笔记本电脑(U9-185H 32G 1T RTX4060 2.5K 240Hz)日蚀灰',
    w: false,
    oopp: '¥13999',
    num: '33人购买'
  },
  {
    oo: img17,
    oop: 'ROG幻16 Air 酷睿Ultra 9 16英寸设计师游戏本笔记本电脑(U9-185H 32G 1T RTX4060 2.5K 240Hz)日蚀灰',
    w: false,
    oopp: '¥13999',
    num: '33人购买'
  },
  {
    oo: img17,
    oop: 'ROG幻16 Air 酷睿Ultra 9 16英寸设计师游戏本笔记本电脑(U9-185H 32G 1T RTX4060 2.5K 240Hz)日蚀灰',
    w: true,
    oopp: '¥13999',
    num: '33人购买'
  },
  {
    oo: img17,
    oop: 'ROG幻16 Air 酷睿Ultra 9 16英寸设计师游戏本笔记本电脑(U9-185H 32G 1T RTX4060 2.5K 240Hz)日蚀灰',
    w: true,
    oopp: '¥13999',
    num: '33人购买'
  },
  {
    oo: img17,
    oop: 'ROG幻16 Air 酷睿Ultra 9 16英寸设计师游戏本笔记本电脑(U9-185H 32G 1T RTX4060 2.5K 240Hz)日蚀灰',
    w: true,
    oopp: '¥13999',
    num: '33人购买'
  },
  {
    oo: img17,
    oop: 'ROG幻16 Air 酷睿Ultra 9 16英寸设计师游戏本笔记本电脑(U9-185H 32G 1T RTX4060 2.5K 240Hz)日蚀灰',
    w: false,
    oopp: '¥13999',
    num: '33人购买'
  },
  {
    oo: img17,
    oop: 'ROG幻16 Air 酷睿Ultra 9 16英寸设计师游戏本笔记本电脑(U9-185H 32G 1T RTX4060 2.5K 240Hz)日蚀灰',
    w: false,
    oopp: '¥13999',
    num: '33人购买'
  },
  {
    oo: img17,
    oop: 'ROG幻16 Air 酷睿Ultra 9 16英寸设计师游戏本笔记本电脑(U9-185H 32G 1T RTX4060 2.5K 240Hz)日蚀灰',
    w: false,
    oopp: '¥13999',
    num: '33人购买'
  },
  {
    oo: img17,
    oop: 'ROG幻16 Air 酷睿Ultra 9 16英寸设计师游戏本笔记本电脑(U9-185H 32G 1T RTX4060 2.5K 240Hz)日蚀灰',
    w: false,
    oopp: '¥13999',
    num: '33人购买'
  }
]
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="hello" />

      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
      </nav>
    </div>
  </header>

  <div class="container">
    <div class="head">
      <div class="head-logo" v-for="(item, index) in logo" :key="index">
        <img :src="item.img" alt="" />
      </div>
      <div class="head-search">
        <div class="search">
          <input type="text" />
          <button>搜索</button>
        </div>
        <div class="head-tags">
          <span
            >手机&nbsp;货架&nbsp;vivo&nbsp;空调&nbsp;笔记本电脑&nbsp;女装&nbsp;瓷砖&nbsp;男装&nbsp;床&nbsp;男鞋&nbsp;沙发</span
          >
        </div>
      </div>
    </div>
  </div>
  <div class="middle-container">
    <div class="middle-bigbox">
      <div class="middle-left">
        <div class="id" v-for="(item, index) in data" :key="index">
          <img :src="item.iii" alt="" />
          {{ item.l1 }}
          {{ item.l2 }}
          {{ item.l3 }}
        </div>
      </div>
      <div class="middle-right">
        <div class="middle-right-left">
          <div class="middle-right-left-head">
            <div>天猫</div>
            <div>1666严选</div>
            <div>天猫超市</div>
            <div>司法拍卖</div>
            <div>聚划算</div>
            <div>淘宝直播</div>
            <div>飞猪旅行</div>
            <div></div>
          </div>
          <div class="middle-right-left-end">
            <div class="middle-right-left-end-left" v-for="(item, index) in photo" :key="index">
              <img :src="item.src" width="240px" height="310px" alt="" />
            </div>
            <div class="middle-right-left-end-right">
              <div class="iddle-right-left-end-right-head">
                <div class="head-1"><span>淘工厂·良心工厂货</span></div>
                <div class="head-2">
                  <div class="head-2-1" v-for="(item, index) in tgc" :key="index">
                    <img :src="item.gc" width="128px" height="133px" alt="" />
                    <div class="head-wz">
                      {{ item.gp }}
                      <div>{{ item.go }}</div>
                      <div class="font">{{ item.gj }}</div>
                    </div>
                  </div>
                  <div class="head-2-2" v-for="(item, index) in tgc" :key="index">
                    <img :src="item.gc" width="128px" height="133px" alt="" />
                    <div class="head-wz">
                      {{ item.gp }}
                      <div>{{ item.go }}</div>
                      <div class="font">{{ item.gj }}</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="iddle-right-left-end-right-end">
                <div class="head-2">
                  <div class="head-2-1" v-for="(item, index) in tgc" :key="index">
                    <img :src="item.gc" width="128px" height="133px" alt="" />
                    <div class="head-wz">
                      {{ item.gp }}
                      <div>{{ item.go }}</div>
                      <div class="font">{{ item.gj }}</div>
                    </div>
                  </div>
                  <div class="head-2-2" v-for="(item, index) in tgc" :key="index">
                    <img :src="item.gc" width="128px" height="133px" alt="" />
                    <div class="head-wz">
                      {{ item.gp }}
                      <div>{{ item.go }}</div>
                      <div class="font">{{ item.gj }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="middle-right-right">
          <div class="middle-right-right-head" v-for="(item, index) in dl" :key="index">
            <div class="head-logo"><img :src="item.dd" alt="" /></div>
            <div class="head-logo-next">{{ item.da }}</div>
          </div>
          <div class="middle-right-right-middle" v-for="(item, index) in aq" :key="index">
            <div class="middle-right-right-middle-1">
              <div>{{ item.aa }}</div>
              <div>{{ item.as }}</div>
              <div>{{ item.ad }}</div>
            </div>
            <div class="middle-right-right-middle-2">
              <div class="aaa" v-for="(i, index) in ba" :key="index">
                <img :src="i.img00" />
                <div>{{ i.img00p }}</div>
              </div>
            </div>
          </div>
          <div class="middle-right-right-end">
            <div class="end-1" v-for="(item, index) in end" :key="index">
              <img :src="item.aa" alt="" />
              <div>{{ item.aap }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="end-container">
    <div class="end-head">
      <span>猜你喜欢</span>
    </div>
    <div class="end-end">
      <div class="end-end-1" v-for="(item, index) in over" :key="index">
        <img :src="item.oo" alt="" />
        <div>
          {{ item.oop }}
          <div style="color: red" v-if="item.w === true">送运费险 3期免息</div>
        </div>
        <div class="ooo">
          {{ item.oopp }}&nbsp;&nbsp;&nbsp;
          <div>{{ item.num }}</div>
        </div>
      </div>
    </div>
  </div>
  <RouterView />
</template>

<style scoped>
header {
  line-height: 1.5;
  max-height: 100vh;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

nav {
  width: 100%;
  font-size: 12px;
  text-align: center;
  margin-top: 2rem;
}

nav a.router-link-exact-active {
  color: var(--color-text);
}

nav a.router-link-exact-active:hover {
  background-color: transparent;
}

nav a {
  display: inline-block;
  padding: 0 1rem;
  border-left: 1px solid var(--color-border);
}

nav a:first-of-type {
  border: 0;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }

  nav {
    text-align: left;
    margin-left: -1rem;
    font-size: 1rem;

    padding: 1rem 0;
    margin-top: 1rem;
  }
}

* {
  margin: 0;
  padding: 0;
}

body {
  height: 100%;
}

.container {
  width: 1020px;
  height: 120px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.head {
  width: 800px;
  height: 72px;
  display: flex;
  justify-content: space-between;
}

.head-logo {
  width: 240px;
  height: 72px;
}
.head-logo img {
  width: 240px;
  height: 72px;
}
.head-search {
  width: 544px;
  height: 72px;
  display: flex;
  flex-direction: column;
}

.search {
  width: 544px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.head-search input {
  flex: 1;
  height: 52px;
  box-sizing: border-box;
  outline: none;
  padding: 0 20px;
  transition: all 0.3s;
}
.head-search button {
  height: 52px;
  line-height: 50px;
  padding: 0 30px;
  box-sizing: border-box;
  background-color: #ff7f50;
  font-size: 24px;
  color: #fff;
  cursor: pointer;
}
.head-tags {
  width: 544px;
  height: 20px;
  font-size: 14px;
}

.middle-container {
  width: 1300px;
  height: 416px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.middle-bigbox {
  width: 1250px;
  height: 360px;
  margin: 0 auto;
  display: flex;
}

.middle-left {
  width: 230px;
  height: 360px;
  display: flex;
  flex-direction: column;
  text-align: center;
  flex-wrap: wrap;
}
.id {
  width: 200px;
  height: 30px;
  border: 1px;
  display: flex;
}

.middle-right {
  width: 1040px;
  height: 360px;
  margin: 0 auto;
  display: flex;
}

.middle-right-left {
  width: 752px;
  height: 360px;
}

.middle-right-left-head {
  width: 752px;
  height: 50px;
  display: flex;
}
.middle-right-left-head > div {
  width: 94px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}
.middle-right-left-end {
  width: 752px;
  height: 310px;
  display: flex;
}

.middle-right-left-end-left {
  width: 240px;
  height: 310px;
}

.middle-right-left-end-right {
  width: 512px;
  height: 310px;
}
.iddle-right-left-end-right-head {
  width: 512px;
  height: 155px;
  font-weight: bold;
  display: flex;
  flex-direction: column;
}
.head-1 {
  width: 512px;
  height: 22px;
}
.head-2 {
  width: 512px;
  height: 133px;
  display: flex;
}
.head-2-1 {
  width: 256px;
  height: 133px;
  display: flex;
}
.head-wz {
  width: 128;
  height: 133px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.font {
  color: #ff7f50;
}
.head-2-2 {
  width: 256px;
  height: 133px;
  display: flex;
}
.iddle-right-left-end-right-end {
  width: 512px;
  height: 155px;
}
.middle-right-right {
  width: 288px;
  height: 360px;
}

.middle-right-right-head {
  width: 288px;
  height: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.head-logo {
  width: 200px;
  height: 80px;
  display: flex;
  justify-content: center;
}
.head-logo img {
  width: 150px;
  height: 80px;
}
.head-logo-next {
  width: 200px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
}

.middle-right-right-middle {
  width: 288px;
  height: 100px;
}
.middle-right-right-middle-1 {
  width: 288px;
  height: 50px;
  display: flex;
}
.middle-right-right-middle-1 > div {
  width: 96px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.middle-right-right-middle-2 {
  width: 288px;
  height: 52px;
  display: flex;
}
.aaa {
  width: 72px;
  height: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.aaa img {
  width: 50px;
  height: 35px;
}
.aaa > div {
  font-size: 10px;
}
.middle-right-right-end {
  width: 288px;
  height: 150px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.end-1 {
  width: 70px;
  height: 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.end-1 img {
  width: 70px;
  height: 45px;
}
.end-container {
  width: 1300px;
  height: 600px;
  margin: 0 auto;
}
.end-head {
  width: 1300px;
  height: 50px;
  display: flex;
  align-items: center;
  font-size: 24px;
}
.end-end {
  width: 1300px;
  height: 550px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.end-end-1 {
  width: 220px;
  height: 275px;
  display: flex;
  flex-wrap: wrap;
}
.end-end-1 img {
  width: 160px;
  height: 200px;
  padding-left: 30px;
}
.end-end-1 > div {
  font-size: 11px;
}
.ooo {
  display: flex;
}
</style>
